<template>
    <div>
        <div class="image" v-if="news.imgsrc">
            <a :href="news.url" target="_blank" v-if="news.imgsrc">
                <img :src="news.imgsrc" :alt="news.title" :title="news.title"/>
            </a>
        </div>
        <div class="words">
            <h2 class="title">
                <a :href="news.url" target="_blank">{{ news.title }}</a>
            </h2>
            <div class="aside">
                <span>{{ news.ptime }}</span>
                <span v-if="news.commentCount">评论：{{ news.commentCount }}</span>
                <span v-if="news.source">来源：{{ news.source }}</span>
            </div>
            <div class="content">{{ content }}</div>
        </div>
    </div>
</template>

<script>
    import { getNewsDetails } from '../../services/NewsService';
    export default {
        name: 'NewsItem',
        props: {
            news: {
                type: Object,
                required: true,
            },
        },
        data() {
            return {
                content: ''
            }
        },
        async mounted() {
            this.content = await getNewsDetails(this.news.docid);
        }
    };
</script>

<style scoped>
.image {
	border-radius: 4px;
	float: left;
	margin-right: 20px;
    width: 250px;
    height: 150px;
}
.image img {
    width: 250px;
	height: 150px;
	object-fit: cover;
}
.title {
	font-size: 1.5em;
}
.title a {
	text-decoration: none;
	color: #0069d9;
}
.aside {
	font-size: 14px;
	color: #888;
    font-family: rial,Hiragino Sans GB,STHeiti,Helvetica Neue,Helvetica,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
}
.aside span {
	margin-right: 20px;
	line-height: 1.5rem;
}
.content {
	max-height: 100px;
	overflow: hidden;
	line-height: 1.5rem;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
</style>